<template>
  <div class="container">
    <el-card :style="{maxHeight: contentHeight * 0.9 + 'px'}" class="box-card">
      <div class="title">{{ stationName }} - 油卡充值记录</div>
      <!--查询条件-->
      <div class="query-form">
        <el-form ref="queryForm" :inline="true" :model="param" size="small">
          <el-form-item prop="dataObj.rechargeDateRange">
            <el-date-picker
                v-model="param.dataObj.rechargeDateRange"
                :default-time="['00:00:00', '23:59:59']"
                :picker-options="pickerOptions"
                end-placeholder="充值时间-结束"
                range-separator="至"
                start-placeholder="充值时间-开始"
                type="datetimerange"
            />
          </el-form-item>
          <el-form-item prop="dataObj.payType">
            <el-select v-model="param.dataObj.payType" class="filter-item" clearable filterable
                       placeholder="支付方式">
              <el-option v-for="item in paymentTypeList" :key="item.dictValue" :label="item.dictLabel"
                         :value="item.dictValue"/>
            </el-select>
          </el-form-item>
          <!-- 加油金额 -->
          <el-form-item prop="dataObj.amount1">
            <el-input
                v-model="param.dataObj.amount1"
                class="filter-item"
                clearable
                placeholder="充值金额>="
                type="number"
            />
          </el-form-item>
          <el-form-item prop="dataObj.amount2">
            <el-input
                v-model="param.dataObj.amount2"
                class="filter-item"
                clearable
                placeholder="充值金额<"
                type="number"
            />
          </el-form-item>
          <el-form-item prop="dataObj.cardNo">
            <el-input v-model="param.dataObj.cardNo" class="filter-item" clearable placeholder="油卡号码"/>
          </el-form-item>
          <el-form-item>
            <el-button
                v-waves
                class="filter-item"
                icon="el-icon-search"
                size="small"
                style="margin-left: 10px;"
                type="primary"
                @click="getDataList"
            >查询
            </el-button>
            <el-button
                v-waves
                class="filter-item"
                icon="el-icon-refresh"
                size="small"
                style="margin-left: 10px;"
                type="primary"
                @click="resetQueryForm"
            >重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!--数据表格展示-->
      <div class="data-table">
        <el-table
            v-loading="dataListLoading"
            :data="dataList"
            border
            fit
            highlight-current-row
            size="small"
            style="width: 100%;"
            @row-click="handleClick"
        >
          <el-table-column :index="shownIndex" align="center" fixed label="序号" type="index"/>
          <el-table-column align="center" label="卡号" prop="cardNo"/>
          <el-table-column align="center" label="开卡油站" prop="cardStationName" show-overflow-tooltip/>
          <el-table-column align="center" label="充值油站" prop="rechargeStationName" show-overflow-tooltip/>
          <el-table-column align="center" label="充值日期" prop="rechargeDate" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ formatDate(scope.row.rechargeDate) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="充值前余额" prop="balanceBefore"/>
          <el-table-column align="center" label="充值金额" prop="payAmount"/>
          <el-table-column align="center" label="赠送金额" prop="giftAmount"/>
          <el-table-column align="center" label="充值后余额" prop="balanceAfter"/>
          <el-table-column align="center" label="客户名称" prop="username"/>
          <el-table-column align="center" label="支付方式" prop="payTypeName"/>
          <el-table-column align="center" label="支付状态" prop="payStatusName"/>
          <el-table-column align="center" label="充值场景" prop="rechargeSceneName"/>
          <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                  v-waves
                  size="mini"
                  type="primary"
                  @click="printReceipt(scope.row)"
              >打印
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--分页展示-->
      <div class="pagination-bar">
        <el-pagination
            :current-page="param.pageNum"
            :page-size="param.pageSize"
            :page-sizes="[10,20]"
            :total="total"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!--工具栏-->
    <div class="home-btn">
      <div class="btn-item">
        <el-button icon="el-icon-back" round size="small" type="primary" @click="goBackHome"> 返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getDictList} from '../../api/baseInfo'
import {getCardRechargeReceiptText} from '@/utils/receipt'
import CheckAuthorize from '../../components/settle/components/CheckAuthorize.vue'
import {getCardRechargeList} from '@/api/card'

var moment = require('moment')

export default {
  name: 'CardRechargeRecords',
  components: {
    CheckAuthorize
  },
  data () {
    return {
      total: 0,
      param: {
        pageNum: 1,
        pageSize: 10,
        dataObj: {
          rechargeStationId: '',
          memberId: '',
          memberPhone: '',
          fuelRecordId: '',
          gunNo: '',
          cardNo: '',
          payType: '',
          rechargeDateRange: [moment().startOf('day'), moment().endOf('day')],
          rechargeDate1: '',
          rechargeDate2: '',
          amount1: '',
          amount2: ''
        }
      },
      showAuthDialog: false,
      dataListLoading: false,
      dataList: [],
      paymentTypeList: [],
      currentRow: {},
      pickerOptions: {
        disabledDate (time) {
          return (new Date(moment().startOf('day').format('YYYY-MM-DD HH:mm:ss')) - time.getTime() > 3600 * 1000 * 24 * 30)
        },
        shortcuts: [
          {
            text: '今日',
            onClick (picker) {
              const start = new Date(moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'))
              const end = new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'))
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick (picker) {
              const start = new Date(moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'))
              const end = new Date(moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'))
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['contentHeight', 'stationId', 'stationName', 'shiftInfo', 'operator'])
  },
  mounted () {
    getDictList('pay_type').then(res => {
      console.log(res)
      this.paymentTypeList = res.data
    })
  },
  methods: {
    goBackHome () {
      this.$router.push('/history')
    },
    shownIndex (index) {
      return (this.param.pageNum - 1) * this.param.size + index + 1
    },
    handleSizeChange (size) {
      this.param.size = size
      this.getDataList()
    },
    handleCurrentChange (page) {
      this.param.pageNum = page
      this.getDataList()
    },
    getDataList () {
      // 时间必选
      if (!this.param.dataObj.rechargeDateRange || this.param.dataObj.rechargeDateRange.length < 2) {
        this.$message.error('请选择查询时间！')
        return false
      }
      this.param.dataObj.rechargeStationId = this.stationId
      this.param.dataObj.rechargeDate1 = this.param.dataObj.rechargeDateRange[0]
      this.param.dataObj.rechargeDate2 = this.param.dataObj.rechargeDateRange[1]
      getCardRechargeList(this.param).then(res => {
        console.log(res)
        this.dataList = res.data.records
        this.total = res.data.total
        this.dataListLoading = false
        this.$message.success(res.msg || '获取数据成功')
      }).catch(err => {
        console.log(err)
      })
    },
    resetQueryForm () {
      this.$refs['queryForm'].resetFields()
      this.param.pageNum = 1
      this.param.rechargeDateRange = [moment().startOf('day'), moment().endOf('day')]
      this.getDataList()
    },
    // 打印小票
    printReceipt (data) {
      let params = JSON.parse(JSON.stringify(data))
      console.log(params)
      params.stationName = params.rechargeStationName
      params.paymentTypeName = params.payTypeName
      params.balance = params.balanceAfter
      params.operator = this.operator
      params.shiftName = this.shiftInfo.shiftName
      params.paymentChannel = '充值'
      this.$store.dispatch('addToReceiptList', getCardRechargeReceiptText(params))
    },
    handleClick (row, column, event) {
      console.log('handleClick')
      console.log(row)
      this.currentRow = row
    },
    formatDate (time) {
      return moment(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 80%;
  margin-left: 10%;
  position: absolute;
  top: 20px;
  overflow-y: auto;
  padding: 20px;
}

.home-btn {
  position: absolute;
  top: 2%;
  left: 2%;
}

.btn-item {
  margin-bottom: 20px;
}

.title {
  text-align: center;
  font-size: 1.6rem;
  color: #666;
}

.card-form {
  background: white;
  padding: 20px;
}

.btn-bar {
  margin-top: 20px;
  text-align: right;
}

.query-form {
  margin-top: 10px;
}

.pagination-bar {
  padding: 10px;
  text-align: center;
}
</style>
